<template>
  <el-row>
    <div class="handle-box">
      <el-input v-model="query.qw" placeholder="关键词" class="handle-input mr10"></el-input>
      <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
    </div>
    <el-table
      :data="users"
      border
      class="table"
      ref="multipleTable"
      header-cell-class-name="table-header"
      v-loading="loading"
    >
      <el-table-column prop="username" label="用户名" fixed="left"></el-table-column>
      <el-table-column prop="mail" label="邮箱地址"></el-table-column>
      <el-table-column label="头像" align="center">
        <template v-slot="{ row }">
          <el-image class="table-td-thumb" :src="row.portrait | imgurl" :preview-src-list="[row.portrait] | imgurl"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right">
        <template v-slot="{ row }">
          <template>
            <el-button type="text" icon="el-icon-edit" v-to="{ name: 'user-editing', params: { id: row.id } }"> 编辑 </el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, prev, pager, next, sizes, jumper"
        :current-page="query.page"
        :page-size="query.size"
        :page-sizes="pageSizes"
        :total="total"
        @size-change="query.size = $event"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
  </el-row>
</template>

<script>
import { getUserList, userPower } from '@/api/user'
import { analysisQuery } from '@/utils'
export default {
  data() {
    return {
      query: {
        qw: '',
        page: 1,
        size: 10,
      },
      loading: false,
      pageSizes: [5, 10, 30, 100],
      users: [],
      multipleSelection: [],
      total: 0,
    }
  },
  watch: {
    query: {
      deep: true,
      handler(query) {
        this.$router.replace({ path: './', query }).catch((err) => err)
      },
    },
  },
  methods: {
    // 触发搜索按钮
    handleSearch() {
      this.$set(this.query, 'page', 1)
      this.getUserList()
    },
    // 获取用户列表
    async getUserList() {
      this.loading = true
      const data = await getUserList(this.query)
      this.loading = false
      this.users = data.data
      this.total = data.total
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, 'page', val)
      this.getUserList()
    },
  },
  created() {
    Object.assign(this.query, analysisQuery(this.$route.query))
    this.handleSearch()
  },
}
</script>

<style lang="scss" scoped>
.handle-box {
  margin-bottom: 12px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.warning {
  color: #e6a23c;
}
.danger {
  color: #ff0000;
}
.success {
  color: #67c23a;
}
.mr10 {
  margin-right: 10px;
}
::v-deep {
  .table-td-thumb {
    display: block;
    margin: auto;
    img {
      width: auto;
      height: 40px;
    }
  }
}
</style>
